<template>
  <div class="Searchsinger">
    <div class="main">
      <div class="imglist" v-for="item in resultartists" :key="item.id">
        <img :src="item.img1v1Url" alt="">
        <p>{{item.name}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Searchsinger',
  computed: {
    ...mapState({
      resultartists: state => state.search.resultsongs.artists
    })
  },
  data() {
    return {
      limit: 100,
      offset: 0,
      type: 100
    }
  },
  mounted() {
    this.$store.dispatch('getSearchdetailsList', { keywords: this.$route.query.keywords, limit: this.limit, offset: this.offset, type: this.type })
  }
}
</script>

<style lang="less" scoped>
.Searchsinger {
  .main {
    .imglist {
      width: 100%;
      padding: 5px;
      padding-left: 20px;
      display: flex;
      align-items: center;
      border-radius: 5px;
      img {
        width: 70px;
        height: 70px;
        border-radius: 5px;
      }
      p {
        margin-left: 20px;
        font-size: 15px;
        opacity: 0.8;
        color: rgb(54, 54, 249);
      }
    }
    .imglist:hover {
      cursor: pointer;
      background-color: rgb(240, 239, 238);
    }
  }
}
</style>